import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { Link } from 'react-router-dom';
import { message } from 'antd';
import { observer } from 'mobx-react';
import headerStyle from './header.scss';
import UserStore from '../../store/User';
import AlStore from '../../store/Alliance';
import HeaderNavStore from '../../store/HeaderNav';
import authCheck from '@/tool/authCheck';
import adminAuthType from '@/tool/adminAuthType';
import ApiHelper from "../../store/ApiHelper";
import { update_cache } from '@/constants/ApiTypes';
import MModal from "./MModal";

const defaultHead = '/static/alliance2/image/head.png';

class DropMenu extends Component {
    state = {
        dropDown: false
    };
    static propTypes = {
        username: PropTypes.string,
        head: PropTypes.string
    };
    static defaultProps = {
        username: 'lianmengdian',
        head: defaultHead
    };
    componentDidMount() {
        document.addEventListener('click', this.listenerClick);
    }
    listenerClick = (e) => {
        if (!this.state.dropDown) return;
        // if (!this.menu.contains(e.target)) {
        //     this.hideDropMenu();
        // }
        this.hideDropMenu();
    };
    componentWillUnmount() {
        document.removeEventListener('click', this.listenerClick);
    }
    showDropMenu = e => {
        e.nativeEvent.stopImmediatePropagation();
        this.setState({ dropDown: true });
    };
    hideDropMenu = () => { this.setState({ dropDown: false }) };
    updateCache = async () => {
        const hide = message.loading('更新中...', 0);
        await ApiHelper.requestPost(update_cache);
        hide();
        MModal.success({ title: '操作成功', content: '刷新成功', duration: 1.5 });
    };
    render() {
        const { username, head } = this.props;
        const { dropDown } = this.state;
        let showDropMenu, hoverMenuStyle;
        if (dropDown) {
            showDropMenu = { visibility: 'visible', opacity: 1 };
            hoverMenuStyle = { backgroundColor: '#2b2b2b' };
        }

        return (
            <div className={`${headerStyle['toolbar-item']} ${headerStyle['user-item']}`}>
                <div className={headerStyle['toolbar-item-btn']} style={hoverMenuStyle} onClick={this.showDropMenu}>
                    <span><img src={head == 0 ? defaultHead : head}/>{username}</span>
                </div>
                <ul ref={(menu) => { this.menu = menu } } className={headerStyle['topbar-info-dropdown-memu']} style={showDropMenu}>
                    <li className={headerStyle['topbar-menu-btn']}>
                        <a href="javascript:void(0);">
                            <span>个人中心</span>
                        </a>
                    </li>
                    <li className={headerStyle['topbar-menu-btn']}>
                        <a href="javascript:void(0);">
                            <span>账号设置</span>
                        </a>
                    </li>
                    {(process.env.NODE_ENV === 'production' && adminAuthType() == 1) &&
                    <li className={headerStyle['topbar-menu-btn']}>
                        <a href="http://alliance.91renta.com">
                            <span>切换旧版</span>
                        </a>
                    </li>}
                    <li className={headerStyle['topbar-menu-btn']}>
                        <a href="javascript:void(0);" onClick={this.updateCache}>
                            <span>刷新缓存</span>
                        </a>
                    </li>
                    <li className={headerStyle['topbar-menu-btn']}>
                        <Link to="/logOut">
                            <span>退出</span>
                        </Link>
                    </li>
                </ul>
            </div>
        );
    }
}

class HeaderNavItem extends Component {
    static propTypes = {
        name: PropTypes.string.isRequired,
        icon: PropTypes.string.isRequired,
        onClick: PropTypes.func,
        url: PropTypes.string
    };
    itemOnClick = () => {
        if (typeof this.props.onClick === 'function') this.props.onClick();
    };
    render() {
        const { name, icon, url } = this.props;
        if (url) {
            return (
                <div className={headerStyle['toolbar-item']}>
                    <Link to={url} className={headerStyle['toolbar-item-btn']}>
                        <span><img className={headerStyle['toolbar-item-icon']} src={icon}/>{name}</span>
                    </Link>
                </div>
            );
        } else {
            return (
                <div className={headerStyle['toolbar-item']} onClick={this.itemOnClick}>
                    <div className={headerStyle['toolbar-item-btn']}>
                        <span><img className={headerStyle['toolbar-item-icon']} src={icon}/>{name}</span>
                    </div>
                </div>
            );
        }
    }
}

@observer class Header extends Component {
    render() {
        const extraNavList = HeaderNavStore.extraNav.map((val, index) => {
            if ( typeof val.render === 'function') {
                return val.render(index);
            } else {
                return <HeaderNavItem key={index} {...val} />;
            }
        });
        return (
            <header id={headerStyle['header']}>
                <h1 className={headerStyle.logo}><a href="javascript:void(0);">{AlStore.info.org_name}</a></h1>
                <div className={headerStyle.toolbar}>
                    {extraNavList}
                    <HeaderNavItem name="客服" icon="/static/alliance2/image/head-kefu.png" />
                    {authCheck('*', '设置') &&
                    <HeaderNavItem name="消息" icon="/static/alliance2/image/head-xiaoxi.png" url="/设置/消息管理" />}
                    <DropMenu username={UserStore.info.account_name} head={UserStore.info.head}/>
                </div>
            </header>
        );
    }
}

export default Header;